<!-- 定义模板对象 -->
<template>
  <div id="">
    <h1>elementUI工具</h1>
    <!-- 1.1面包屑导航
    elementUI提供得组件 Breadcrumb
                        BreadcrumbItem
         1.2引入组件   element.js   import Vue.use(组件名)
    -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/elementUI' }">UI页面</el-breadcrumb-item>
      <el-breadcrumb-item>ElementUI工具API</el-breadcrumb-item>
      <el-breadcrumb-item>入门案例</el-breadcrumb-item>
      <el-breadcrumb-item>活动</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 2.定义卡片视图-->
    <el-card class="box-card hwCard">
      <!-- 4.栅格：将一行固定划分为24块，可以调整每块所占的大小-->
      <el-row gutter="20">
        <el-col :span="8">
          <!-- 3.引入input输入框-->
          <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" round @click="showDialog">按钮</el-button>
        </el-col>
      </el-row>

      <!-- 5.弹出框设计
           title="弹出框的标题"
           :visible.sync="dialogVisible"  控制弹出框是否展现 true/false
      -->
      <el-dialog title="弹出框效果展现" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
        <!-- 6.表单提交
               ref="为表单定义一个id"
               model 是elementUI中特定属性 ，负责绑定数据
         -->
        <el-form ref="form" :model="addUser" label-width="80px">
           <el-form-item label="用户名">
             <el-input v-model="addUser.username" placeholder="请输入用户名"></el-input>
           </el-form-item>
           <el-form-item label="密码">
             <el-input v-model="addUser.password" type="password" placeholder="请输入密码">
             </el-input>
           </el-form-item>
         </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
  /*  //组件对象
  let aaaCom = {
    data(){
      return{

      }
    },
    methods: {

    }
  }
  Vue.component("aaaCom",aaaCom) */
  //对外声明 当前组件得属性，export default 将组件交给VUE对象管理
  export default {
    data() {
      return {
        dialogVisible: false,
        //form表单中的数据有多个，所以采用对象
        addUser: {
            username:'',
            password:''
        }
      }
    },
    methods: {
      //添加点击事件
      showDialog() {
        //点击展现弹出框
        this.dialogVisible=true
      }
    }

  }
</script>

<style lang="less" scoped>
  .hwCard {
    width: 900px;
    height: 500px;
  }
</style>
